<template>
    <el-dialog
    title="修改"
    :visible.sync="editData.dialogState"
    size="tiny"
    class="dialog-config-box"
    @open='open'
    >
        <el-form v-loading='loading' class="form-main" :model="dataForm" :rules="rules" ref="dataForm" label-width="140px"  label-position='right'>
            <el-row :gutter="21" class="audit-item">
                <el-col :span="24">
                    <el-form-item label="学校名称：" class="el-item">
                       <span>{{dataShow.schoolName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="服务名称：" class="el-item">
                        <span>{{dataShow.serviceName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="收费金额：" class="el-item">
                       <span>{{dataShow.money}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="收费方式：" class="el-item">
                        <span>{{!dataShow.chargeWay?'':dataShow.chargeWay=='1'?'月收':dataShow.chargeWay=='2'?'年收':''}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="audit-item charge-list">
                <el-col :span="24">
                    <el-form-item label="收费种类：" class="form-item"></el-form-item>
                    <div class="charge-type">
                        <ul class="ul-content">
                            <li class="li-title"><span>零售</span></li>
                            <li class="li-content">
                                <ul class="ul-list">
                                    <li>
                                        <ul class="ul-item ul-header">
                                            <li>份数</li>
                                            <li>原价</li>
                                            <li>现价</li>
                                        </ul>
                                    </li>
                                    <li v-for="item in dataShow.chargeTypeList" :key='item.id'>
                                        <ul class="ul-item">
                                            <li>{{item.name}}</li>
                                            <li>{{item.price}}元</li>
                                            <li>{{Number(item.discount).toFixed(2)}}元</li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="charge-type" v-if="dataShow.sIsPack == '1' && dataShow.sNewPackList.length">
                        <ul class="ul-content">
                            <li class="li-title"><span>打包</span></li>
                            <li class="li-content">
                                <ul class="ul-list">
                                    <li>
                                        <ul class="ul-item ul-header">
                                            <li>份数</li>
                                            <li>原价</li>
                                            <li>打包价</li>
                                        </ul>
                                    </li>
                                    <li v-for="item in dataShow.sNewPackList" :key='item.id'>
                                        <ul class="ul-item">
                                            <li>{{item.name}}</li>
                                            <li>{{item.originalPrice}}元</li>
                                            <li>{{Number(item.price).toFixed(2)}}元</li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="time-proportion">
                    <el-form-item label="收费开始时间：" prop="startTime" :rules="rules.startTime" class="el-item">
                        <el-date-picker
                        v-model="dataForm.startTime"
                        type="date"
                        placeholder="选择日期"
                        :editable='false'
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="time-proportion">
                    <el-form-item label="请设置分成比例：" prop="proportion" :rules="rules.proportion" class="el-item">
                        <el-input v-model="dataForm.proportion" :maxlength="3" style="width:40%;"></el-input>&nbsp;&nbsp;%
                    </el-form-item>
                </el-col>
                <!-- cuihd 2018/2/24 注释 原因：需求方认为一般情况不需要修改代理区域下所有学校的分成比列 -->
                <!-- <el-col :span="24">
                    <el-form-item label="" label-width="0" prop="state" :rules="rules.state" class="el-item">
                        <el-radio-group v-model="dataForm.state">
                            <el-radio label="0">修改学校分成比例</el-radio>
                            <el-radio label="1">修改代理区域分成比例</el-radio>
                        </el-radio-group>
                        <p v-if="dataForm.state == '1'" class="note">选择此选项该经销商所有区域分成比列都将一样</p>
                    </el-form-item>
                </el-col> -->
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('dataForm')"> 取 消 </el-button>
            <el-button type="primary" @click="submitForm('dataForm')"> 确 定 </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import moment from 'moment';
    import { updatePayRecordPercent } from 'api/serviceManage';
    export default {
        name: 'editServiceConfig',
        props: {
            editData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                loading: false,
                dataShow: {
                    schoolName: '',
                    serviceName: '',
                    money: '',
                    chargeWay: '',
                    chargeTypeList: [],
                    sNewPackList: [],
                    sIsPack: '0'
                },
                dataForm: {
                    startTime: '',
                    proportion: '',
                    state: '0'
                },
                rules: {
                    startTime: [
                        { required: true, message: '请选择日期'},
                        { validator: (rule, value, callback) => {
                            if (!value) {
                                callback(new Error('请选择日期'));
                            } else {
                                callback();
                            }
                        }, trigger: 'change' }
                    ],
                    proportion: [
                        { required: true, message: '内容不能为空'},
                        { pattern: /^[0-9]*$/, message: '请输入0~100的整数'},
                        { validator: (rule, value, callback) => {
                            if (Number(value)<0 || Number(value)>100) {
                                callback(new Error('请输入0~100的整数'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur' }
                    ],
                    state: [
                        { required: true, message: '内容不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        computed: {
            
        },
        methods: {
            open() {
                this.dataShow.schoolName = this.editData.dataList.sSchoolName;
                this.dataShow.serviceName = this.editData.dataList.sServiceName;
                this.dataShow.money = this.editData.dataList.sMoney;
                this.dataShow.chargeWay = this.editData.dataList.sPayTypeNew;
                this.dataShow.chargeTypeList = JSON.parse(this.editData.dataList.sNewTimeNum); 
                this.dataShow.sNewPackList = JSON.parse(this.editData.dataList.sNewPackTimeNum);
                this.dataForm.startTime = this.editData.dataList.sPayStartTime;
                this.dataForm.proportion = Number(this.editData.dataList.sDividedPercentage);
                this.dataShow.sIsPack = this.editData.dataList.sIsPack;
            },
            submitForm(dataForm) {
                this.$refs[dataForm].validate((valid) => {
                    if (valid) {
                        let pId = this.editData.dataList.pId; // 收费记录ID
                        let sPayStartTime = '';

                       
                        // if (this.editData.dataList.sPayStartTime == this.dataForm.startTime) {
                        //     sPayStartTime = this.dataForm.startTime;
                        // } else {
                        sPayStartTime = this.dataForm.startTime==''?'':moment(this.dataForm.startTime).format('YYYY-MM-DD HH:mm:ss'); // 收费开始时间
                        // }
                        
                        let sDividedPercentage = Number(this.dataForm.proportion); // 分成比例
                        // edit by cuihd 2018/2/24 
                        // let updateAllSchool = this.dataForm.state; // 是否更新所有学校的分成比例 1是  0否 
                        // edit by cuihd 2018/2/24 
                        let updateAllSchool = '0'; 

                        this.loading = true;
                        updatePayRecordPercent(
                            pId, // 收费记录ID
                            sPayStartTime, // 收费开始时间
                            sDividedPercentage, // 分成比例
                            updateAllSchool // 是否更新所有学校的分成比例 1是  0否
                        ).then(response => {
                            this.loading = false;
                            this.$message.success(response.data.errorMsg);
                            this.editData.dialogState = false;
                            this.$emit('search');
                            this.$refs[dataForm].resetFields();
                        }).catch(() => {
                            this.loading = false;
                        });
                    }
                })
            },
            resetForm(dataForm) {
                this.editData.dialogState = false;
                this.$refs[dataForm].resetFields();
            }
        }
    }

</script>

<style lang="scss">
    @import "src/styles/mixin.scss";
    @include scrollBar;
    .dialog-config-box{
        .el-dialog--tiny {
            width: 700px;
        }
        .el-dialog__header{
            text-align:center;
            background:#f7f7f9;
            height:54px;
            .el-dialog__title{
                font-size:20px;
                color:#333;
            }
        }
        .form-main{
            font-size: 12px;
            color: #333;
            width: 90%;
            margin: 0 auto; 
            max-height: 520px;
            overflow-y: auto;
            .audit-item {
               width: 100%;
            }
            .charge-list {
                margin-bottom: 10px;
            }
            ul {
                list-style: none;
                .charge-type {
                    padding-right: 6px;
                }
            }
            // .ul-css {
            //     max-height: 180px;
            //     overflow-y: scroll;
            // }
            .form-item {
                margin-bottom:0px;
            }
            .charge-type {
                overflow:hidden;
                margin-left: 60px;
                font-size:14px;
                color:#333;
                margin-bottom: 22px;
                ul,li{ padding:0;margin:0;list-style:none;}
                .ul-content {
                    float:left;
                    border: 1px solid #ddd;
                    display: flex;
                    .li-title {
                        width: 80px;
                        align-self: center;
                        text-align: center;
                    }
                    >li {
                        float:left;
                        .ul-list {
                            overflow: hidden;
                            >li {
                               overflow: hidden; 
                            }
                            .ul-item {
                                float:left;
                                li {
                                    overflow: hidden;
                                    float:left;
                                    height: 30px;
                                    line-height: 30px;
                                    width: 120px;
                                    text-align: center;
                                    border-right: 1px solid #ddd;
                                    border-bottom: 1px solid #ddd;
                                }
                                li:nth-child(1) {
                                    border-left: 1px solid #ddd;
                                }
                                li:last-child {
                                    border-right: none;
                                }
                               
                            }
                            .ul-header {
                                li {
                                    color: #999;
                                    background-color: #f3f3f3;
                                }
                            }
                            >li:last-child {
                                li {
                                    border-bottom: none;
                                }
                            }
                        }
                    }
                }

            }
            .time-proportion {
                margin-bottom: 15px;
            }
            .note {
                color:#E65D6E;
                margin-left: 170px;
            }
        }
        // .el-item {
        //     margin-bottom: 0;
        // }
        // .form-item {
        //     margin-bottom:0px;
        // }
        .dialog-footer{
            // padding-top: 0;
            width: 90%;
            margin: 0 auto; 
            text-align:center;
        }
    }
</style>